import { h, render } from 'vue'

import XtxMessage from './xtx-message.vue'

// 传统创建虚拟dom
// const div = document.createElement('div')
// div.setAttribute('class', 'xtx-message-container')
// document.body.appendChild(div)

// h+render动态创建
const divVNode = h('div', { class: 'xtx-message-container' })
render(divVNode, document.body)
// 虚拟的dom
// console.log(divVNode);
// 真实的dom
// console.log(div);
// 真实的dom放在el里面
const div = divVNode.el

const XtXMessage = ({ message, type }) => {
  console.log({ message, type })
  //   动态创建虚拟dom  createVNode（h）函数
  const comVNode = h(XtxMessage, { message, type })
  //   渲染到body页面
  render(comVNode, div)

  //   3s关闭
  setTimeout(() => {
    render(null, div)
  }, 3000)
}
export default XtXMessage
